<template>
	<div class="noteList">
		<div class="noteHead">
			<h2 class="title">记事本列表</h2>
			<span class="noteType" :class="{active_btn:show=='all'}" @click="choose('all')">全部 {{allLength}}</span><span class="noteType" :class="{active_btn:show=='favorite'}" @click="choose('favorite')">收藏 {{favoriteLength}}</span>
		</div>
		<ul>
			<li v-for="item in noteList" class="noteItem" :class="{active_note: activeNote === item}" @click="edit(item)">{{item.text | limitLength }}</li>
		</ul>
	</div>
</template>
<script>
	export default {
		data () {
			return {
				show:'all'
			}
		},
		components: {

		},
		filters: {
			limitLength (val) {
				if(val.length>22){
					return val.substring(0,22)+'...'
				}else{
					return val
				}
			}
		},
		computed: {
			noteList () {
				if (this.show=='all') {
					return this.$store.state.notes
				} else if (this.show=='favorite') {
					return this.$store.state.notes.filter(note => note.favorite)
				}
			},
			allLength () {
				return this.$store.state.notes.length
			},
			favoriteLength () {
				return this.$store.state.notes.filter(note => note.favorite).length
			},
			activeNote () {
				return this.$store.state.activeNote
			}
		},
		methods: {
			choose(type){
				this.show=type
			},
			edit (item) {
				this.$store.commit('SET_EDIT_NOTE',item)
			}
		}
	}
</script>
<style>
	.noteList{
		width:400px;
		height:100%;
		background:#F5F5F5;
		text-align: center;
		float:left;
	}
	.title{
		text-align:center;
		padding: 20px;
	}
	.noteHead{
		background:#f1eded;
		padding-bottom:20px;
	}
	.noteType{
		display: inline-block;
	    padding: 8px 40px;
	    border: 1px solid #ccc;
	    cursor: pointer;
	}
	.noteItem{
		padding:10px 8px;
		text-align:left;
		border-bottom:1px solid #efe5e5;
		cursor: pointer;
	}
	.noteItem:hover{
		background:#f1eded;
	}
	.active_note,.active_note:hover{
		background:#337ab7;
		color:#fff;
	}
	.active_btn{
		background:#a8bb42;
	}
</style>